import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Layout, Icon, Menu, Badge, Avatar } from 'antd';
import { Link } from "react-router-dom";

import { 
    headerAction as actionCreates,
    navleftAction as navActionCreates   //解决收起左侧菜单时,打开的的submenu没关闭
} from '../../store/action'; 
import './index.less';

import { Tip } from "../../components";
import { Catch } from "../../utils";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { mainService } from '../../service';

const { SubMenu,Item } = Menu;
class Header extends PureComponent{
    render(){
        const { bindIconToggle, collapsed, avatar }=this.props;
        return(
            <Layout.Header style={{ background: '#fff', padding: 0,paddingRight:"10px" }}>
                <Icon
                    className="header-trigger"
                    onClick={ ()=>{ bindIconToggle(collapsed) } }
                    type={collapsed ? 'menu-unfold' : 'menu-fold'}
                />
                <Menu
                    mode="horizontal"
                    style={{ lineHeight: '62px', float: 'right' }}
                >
                    <Item key="badge">
                        <Link to="/auth/role">
                            <Badge count={0} overflowCount={10} style={{marginLeft: 10}}>
                                <Icon type="notification" />
                            </Badge>
                        </Link>
                    </Item>
                    <SubMenu title={<span className="avatar"><Avatar src={avatar} /><i className="on bottom b-white" /></span>}>
                        <Item key="setting:1">你好 - admin</Item>
                        <Item key="setting:2" onClick={this.clearCache}>清楚缓存</Item>
                        <Item key="logout" onClick={this.logout}>
                            <span>退出登录</span>
                        </Item>
                    </SubMenu>
                </Menu>
            </Layout.Header>
        );
    }

    //退出登录
    logout = ()=>{
        NProgress.start();
        Tip.Message('正在退出登录...');
        Catch.remove('access_token');
        Catch.remove('refresh_token');
        setTimeout(()=>{
            window.location.reload();
            NProgress.done();
        },1000);
    }

    clearCache=async ()=>{
        let res = await mainService.clearCache();
        if(res.code === 0){
            Tip.Message(res.msg,'success');
        }else{
            Tip.Message(res.msg,'error');
        }
        
    }

    componentDidMount(){
        this.props.changeTitle(this.props.homeTitle);
        document.title=this.props.homeTitle;
    }
}
const mapState=(state)=>{
    const collapsed=state.getIn(['header','collapsed']);
    const title=state.getIn(['header','title']);
    const avatar=state.getIn(['header','avatar']);
    return {
        collapsed,
        title,
        avatar
    };
};

const mapDispatch=(dispatch)=>{
    return {
        bindIconToggle(collapsed){
            if(!collapsed){
                dispatch(navActionCreates.openSubMenu([]));
            }
            dispatch(actionCreates.iconToggle(collapsed));
        },
        changeTitle(value){
            if(value !== null && value !== "" && value !== undefined){
                dispatch(actionCreates.bindTitle(value));
            }
        }
    };
};

export default connect(mapState,mapDispatch)(Header);

/*
import screenfull from "screenfull";
<Item key="full" onClick={this.full}>
    <Icon type={ this.state.full===true ? "shrink" : "arrows-alt" } />
</Item>
state={
    full:screenfull.isFullscreen
}

full=()=>{
    const full=screenfull.isFullscreen;
    if(full){
        screenfull.exit();
    }else{
        screenfull.request();
    }
    this.setState({
        full:!full
    });
}
*/